<template>
    <div class="time-axis-content-list">
        <div class="info">
            <form-item v-if="moduleObj[dictId].createBy" class="form-item" label="创建人:"
                :value="moduleObj[dictId].createBy" />
            <form-item v-if="moduleObj[dictId].createTime" class="form-item" label="创建时间:"
                :value="moduleObj[dictId].createTime" />
            <!-- <form-item v-if="moduleObj[dictId].remark" class="form-item" label="备注:" :value="moduleObj[dictId].remark" /> -->
        </div>
        <div class="file-content">
            <div class="tit"><span>清单文件：</span><span><el-button size="mini" type="primary" icon="el-icon-plus"
                        @click="handleAdd(moduleObj[dictId])">新增</el-button></span></div>
            <div class="file-list" v-if="isFileList(dictId)">
                <div class="file-item" v-for="file in allFileList((moduleObj[dictId] || {}).mapList)"
                    @click="previewFile(file)">
                    <div class="wrap">
                        <div class="img">
                            <img :src="dynamicImage(dictId)" />
                        </div>
                        <span>{{ file.name || file.serial || '文件未命名' }}</span>
                    </div>
                </div>
                <el-empty :style="isCenter ? { width: '100%' } : { paddingLeft: '145px' }"
                    v-if="!allFileList((moduleObj[dictId] || {}).mapList).length" description="暂无数据"></el-empty>
            </div>
            <div class="file-list" v-else>
                <div class="file-item" v-for="item in (moduleObj[dictId] || {}).mapList"
                    @click="previewPdfFile(moduleObj[dictId], item)">
                    <div class="wrap">
                        <div class="img">
                            <img :src="dynamicImage(dictId)" />
                        </div>
                        <span>{{ item.title }}</span>
                    </div>
                </div>
                <el-empty :style="isCenter ? { width: '100%' } : { paddingLeft: '145px' }" v-if="showEmptyMessage"
                    description="暂无数据"></el-empty>
            </div>
        </div>
        <el-image v-show="false" ref="elImage" :preview-src-list="srcList" />
    </div>
</template>

<script>
import FormItem from '@/components/FormItem/FormItem.vue'
import { MODULE_DICTID, MODULE_ID } from '@/const/modules'
import { downloadPdf } from '@/api/module'
export default {
    components: { FormItem },
    props: {
        dictId: {
            type: [String, Number],
            required: true
        },
        moduleObj: {
            type: Object,
            default: () => { }
        },
        isCenter: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            dictValue: null,
            srcList: []
        }
    },
    computed: {
        allFileList() {
            return (list) => {
                const fileList = list.map(obj => obj.fileList).reduce((item, fileList) => item.concat(fileList), [])
                return fileList
            }
        },
        isFileList() {
            const { specialty, sketch, photo } = MODULE_DICTID
            return (dictId) => {
                return [specialty, sketch, photo].includes(parseInt(dictId))
            }
        },
        mapList() {
            return (this.moduleObj[this.dictId] || { mapList: [] }).mapList;
        },
        showEmptyMessage() {
            return this.mapList.length === 0;
        },
        currentModule() {
            const currentDictId = this.dictId;
            const currentModule = Object.entries(MODULE_DICTID).find(([key, value]) => value == currentDictId);
            const [moduleName,] = currentModule;
            const moduleId = MODULE_ID[currentDictId]
            return { moduleName, moduleId }
        },
        dynamicImage() {
            return (dictId) => {
                return require(`@/assets/images/icon-module-${dictId}.png`);
            }
        }
    },
    methods: {
        async previewPdfFile(obj, item) {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.dictValue = obj.dictId

            try {
                const { moduleName, moduleId } = this.currentModule
                let res = await downloadPdf({ ...item, noticeId: obj.noticeId }, { moduleName })
                this.openwindow(res.data.pdfPath, '预览文件')
                loading.close();
            } catch {
                loading.close();
            }
        },
        previewFile(file) {
            this.srcList = [file]
            this.$refs.elImage.showViewer = true
        },
        handleAdd(row, index = '') {
            this.$emit('add-file', row, index)
        },
    }
}
</script>
<style scoped lang="scss">
.time-axis-content-list {
    .info {
        display: flex;
        margin-bottom: 8px;

        .form-item {
            height: 100%;
            font-size: 14px;
            margin: 0 10px;
            align-items: center;

            &:first-child {
                margin-left: 0;
            }
        }
    }

    .file-content {
        .tit {
            margin-bottom: 10px;
            font-size: 14px;
        }

        .file-wrap {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -25px;
            margin-bottom: 16px;
            flex: 1;
        }

        .file-list {
            display: flex;
            flex-wrap: wrap;

            .file-item {
                flex: 0 0 316px;
                padding: 0 25px;
                cursor: pointer;
                overflow: hidden;

                .wrap {
                    text-align: center;
                    --imgWidthHeight: 90px;

                    .img {
                        width: var(--imgWidthHeight);
                        height: var(--imgWidthHeight);
                        margin: 0 auto;
                        background-color: #fff;
                        cursor: pointer;

                        iframe {
                            width: 100%;
                            height: 100%;
                        }

                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    span {
                        display: block;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}
</style>